<template>
    <!-- 货架管理 -->
    <el-tabs v-model="activeAreaId" @tab-change="tabChange">
  
      <el-tab-pane v-for="item in areaData" :label="item.name" :name="item.id"></el-tab-pane>
  
    </el-tabs>
  
  
  
    <el-row justify="space-between">
      <el-col :span="3">
        <el-tabs tab-position="left" v-model="activeWareHouseId" @tab-change="tabChange2" >
          <el-tab-pane v-for="item in wareHouseData" :label="item.name" :name="item.id"></el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="21">
        <el-form :inline="true" :model="formData" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="formData.name" placeholder="请输入货架名称" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="formData.brief" placeholder="请输入备注" />
          </el-form-item>
          <el-form-item>
  
            <el-input-number v-model="formData.seq" :min="1" :max="99" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onAdd">添加</el-button>
          </el-form-item>
  
        </el-form>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column fixed prop="id" label="ID" width="80" />
          <el-table-column fixed prop="name" label="名称" width="120" />
          <el-table-column fixed prop="brief" label="备注" width="200" />
          <el-table-column prop="statusX" label="状态" width="120" />
          <el-table-column prop="seq" label="排序" width="80" />
  
          <el-table-column prop="lastUpdateBy" label="最近更新人" width="120" :formatter="formatter" />
          <el-table-column prop="lastUpdateTime" label="时间" width="180" :formatter="formatter" />
  
          <el-table-column fixed="right" label="操作" width="160">
            <template #default="scope">
              <el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
  
              <el-button type="danger" v-if="scope.row.status == 1" @click="upOrDown(scope.row, 0)"
                size="small">禁用</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
  
    </el-row>
  </template>
    
  <script setup lang="ts">
  import { onMounted, ref, reactive } from 'vue'
  import { warehouseApi } from '@/api'
  import CategoryTree from '@/components/CategoryTree.vue';
  import { ElMessage, ElMessageBox } from 'element-plus'
  import dayjs from 'dayjs'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const tableData = ref([])
  const wareHouseData = ref([])
  const areaData = ref([])
  import { log } from 'console';
  const activeAreaId = ref(0)
  const activeWareHouseId = ref(0)
  const formData = reactive({
    brief: '',
    name: '',
    seq: 1
  })
  onMounted(() => {
    callAreaApi()
  })
  const onAdd = () => {
    warehouseApi.insert.call({ name: formData.name, brief: formData.brief, parentId: activeWareHouseId.value, seq: formData.seq }).then((res: any) => {
      callShelfApi()
    })
  }
  const callAreaApi = () => {
    warehouseApi.select.call({ parentId: 0 }).then((res: any) => {
      if (res.length > 0) {
        activeAreaId.value = res[0].id
        areaData.value = res
        callWareHouseApi()
      }
  
    })
  }
  
  const callWareHouseApi = () => {
    warehouseApi.select.call({ parentId: activeAreaId.value }).then((res: any) => {
      wareHouseData.value = res
      if (res.length > 0) {
        activeWareHouseId.value = res[0].id
      }
  
    })
  }
  const callShelfApi = () => {
    warehouseApi.select.call({ parentId: activeWareHouseId.value }).then((res: any) => {
      tableData.value = res
  
    })
  }
  const tabChange = (activeName: any) => {
  
    callWareHouseApi()
  }
  const tabChange2 = (activeName: any) => {
  
    callShelfApi()
  }
  const formatter = (_row: any, column: any, cellValue: any, _index: any) => {
  
    if (column.property == "lastUpdateTime") {
      return dayjs(cellValue).format('YYYY-MM-DD HH:mm')
    }
    if (column.property == "lastUpdateBy") {
      return cellValue + " 先生"
    }
  }
  
  </script>